<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>合约交友 - 社交平台</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #4f46e5;
            --primary-light: #818cf8;
            --primary-dark: #3730a3;
            --secondary: #ec4899;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --light-bg: #f9fafb;
            --card-bg: #ffffff;
            --text-primary: #111827;
            --text-secondary: #6b7280;
            --border-color: #e5e7eb;
            --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
            --transition: all 0.2s ease;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--light-bg);
            color: var(--text-primary);
            padding-top: 56px;
            padding-bottom: 65px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: var(--card-bg);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            border-bottom: 1px solid var(--border-color);
            z-index: 1000;
        }
        
        .nav-title {
            font-size: 1.1rem;
            font-weight: 600;
        }
        
        .nav-btn {
            background: none;
            border: none;
            color: var(--text-secondary);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }
        
        .nav-btn:hover {
            background-color: var(--light-bg);
            color: var(--primary);
        }
        
        /* 筛选栏 */
        .filter-bar {
            padding: 12px 16px;
            background-color: var(--card-bg);
            border-bottom: 1px solid var(--border-color);
            position: sticky;
            top: 56px;
            z-index: 900;
        }
        
        .filter-tabs {
            display: flex;
            overflow-x: auto;
            gap: 12px;
            padding-bottom: 4px;
            margin-bottom: 12px;
        }
        
        .filter-tab {
            white-space: nowrap;
            padding: 6px 14px;
            background-color: var(--light-bg);
            border-radius: 20px;
            font-size: 0.9rem;
            color: var(--text-secondary);
            border: none;
            transition: var(--transition);
        }
        
        .filter-tab.active {
            background-color: var(--primary);
            color: white;
        }
        
        .filter-actions {
            display: flex;
            justify-content: space-between;
        }
        
        .filter-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            background-color: var(--light-bg);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            font-size: 0.85rem;
            color: var(--text-secondary);
        }
        
        .view-toggle {
            display: flex;
            gap: 6px;
        }
        
        .view-btn {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--light-bg);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            color: var(--text-secondary);
        }
        
        .view-btn.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        /* 列表容器 */
        .contract-list {
            padding: 12px 16px;
        }
        
        /* 卡片式列表 */
        .contract-card {
            background-color: var(--card-bg);
            border-radius: 12px;
            margin-bottom: 12px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }
        
        .contract-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        
        /* 图片容器 - 支持多图和无图情况 */
        .contract-images {
            position: relative;
            height: 180px;
            display: flex;
        }
        
        .no-image {
            height: 180px;
            background-color: var(--light-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-secondary);
        }
        
        .contract-image {
            flex: 1;
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        
        .contract-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .image-count {
            position: absolute;
            top: 8px;
            right: 8px;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            padding: 2px 6px;
            border-radius: 10px;
            font-size: 0.7rem;
        }
        
        /* 内容区域 */
        .contract-content {
            padding: 14px;
        }
        
        .contract-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
        }
        
        .contract-title {
            font-size: 1.05rem;
            font-weight: 600;
            color: var(--text-primary);
        }
        
        .contract-status {
            font-size: 0.75rem;
            padding: 2px 8px;
            border-radius: 10px;
            font-weight: 500;
        }
        
        .status-active {
            background-color: rgba(16, 185, 129, 0.1);
            color: var(--success);
        }
        
        .status-pending {
            background-color: rgba(245, 158, 11, 0.1);
            color: var(--warning);
        }
        
        .user-info {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 10px;
        }
        
        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .user-details {
            flex: 1;
        }
        
        .user-name {
            font-weight: 500;
            font-size: 0.9rem;
        }
        
        .user-meta {
            font-size: 0.75rem;
            color: var(--text-secondary);
        }
        
        .contract-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 8px 12px;
            margin-bottom: 12px;
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        
        .meta-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .contract-desc {
            font-size: 0.85rem;
            color: var(--text-secondary);
            line-height: 1.4;
            margin-bottom: 12px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .contract-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 12px;
        }
        
        .contract-tag {
            padding: 3px 10px;
            background-color: rgba(79, 70, 229, 0.1);
            color: var(--primary);
            border-radius: 12px;
            font-size: 0.75rem;
        }
        
        .contract-actions {
            display: flex;
            justify-content: space-between;
        }
        
        .action-btn {
            padding: 6px 14px;
            border-radius: 6px;
            font-size: 0.85rem;
            font-weight: 500;
            transition: var(--transition);
        }
        
        .primary-btn {
            background-color: var(--primary);
            color: white;
            border: none;
        }
        
        .primary-btn:hover {
            background-color: var(--primary-dark);
        }
        
        .secondary-btn {
            background-color: transparent;
            border: 1px solid var(--primary);
            color: var(--primary);
        }
        
        /* 简约列表样式 */
        .list-view .contract-card {
            display: flex;
            height: 120px;
        }
        
        .list-view .contract-images,
        .list-view .no-image {
            width: 100px;
            height: 100%;
            flex-shrink: 0;
        }
        
        .list-view .contract-content {
            padding: 10px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .list-view .contract-desc,
        .list-view .contract-tags {
            display: none;
        }
        
        .list-view .contract-actions {
            margin-top: auto;
        }
        
        .list-view .action-btn {
            padding: 4px 10px;
            font-size: 0.8rem;
        }
        
        /* 网格列表样式 */
        .grid-view {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }
        
        .grid-view .contract-card {
            display: flex;
            flex-direction: column;
        }
        
        .grid-view .contract-images,
        .grid-view .no-image {
            height: 140px;
        }
        
        .grid-view .contract-content {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .grid-view .contract-desc {
            display: none;
        }
        
        .grid-view .contract-actions {
            margin-top: auto;
        }
        
        .grid-view .action-btn {
            padding: 4px 8px;
            font-size: 0.8rem;
        }
        
        .grid-view .contract-title {
            font-size: 0.95rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 65px;
            background-color: var(--card-bg);
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid var(--border-color);
            z-index: 1000;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: var(--text-secondary);
            font-size: 0.7rem;
            text-decoration: none;
        }
        
        .nav-item i {
            font-size: 1.25rem;
            margin-bottom: 4px;
        }
        
        .nav-item.active {
            color: var(--primary);
        }
        
        /* 筛选弹窗 */
        .filter-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1010;
            display: none;
            justify-content: flex-end;
        }
        
        .filter-modal.show {
            display: flex;
        }
        
        .filter-content {
            width: 100%;
            max-width: 320px;
            background-color: var(--card-bg);
            height: 100%;
            overflow-y: auto;
            padding: 20px 16px;
        }
        
        .filter-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .filter-section {
            margin-bottom: 24px;
        }
        
        .section-title {
            font-weight: 600;
            margin-bottom: 12px;
            font-size: 0.95rem;
        }
        
        .filter-options {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .filter-option {
            padding: 6px 14px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            font-size: 0.85rem;
            background-color: var(--light-bg);
            color: var(--text-secondary);
            transition: var(--transition);
        }
        
        .filter-option.selected {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        .range-slider {
            width: 100%;
            margin: 16px 0;
        }
        
        .range-value {
            text-align: center;
            font-weight: 500;
            color: var(--primary);
        }
        
        .filter-buttons {
            display: flex;
            gap: 12px;
            margin-top: 20px;
        }
        
        .filter-confirm {
            flex: 1;
            padding: 10px 0;
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 8px;
            font-weight: 500;
        }
        
        .filter-reset {
            flex: 1;
            padding: 10px 0;
            background-color: var(--light-bg);
            color: var(--text-secondary);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-weight: 500;
        }
        
        /* 提示消息 */
        .toast {
            position: fixed;
            top: 60px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 8px 16px;
            border-radius: 4px;
            font-size: 0.9rem;
            z-index: 9999;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .toast.show {
            opacity: 1;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-btn" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">合约交友</div>
        <button class="nav-btn" id="searchBtn">
            <i class="fas fa-search"></i>
        </button>
    </div>
    
    <!-- 筛选栏 -->
    <div class="filter-bar">
        <div class="filter-tabs">
            <button class="filter-tab active">全部</button>
            <button class="filter-tab">附近</button>
            <button class="filter-tab">最新发布</button>
            <button class="filter-tab">热门推荐</button>
            <button class="filter-tab">本周精选</button>
        </div>
        
        <div class="filter-actions">
            <button class="filter-btn" id="advanceFilterBtn">
                <i class="fas fa-sliders-h"></i>
                <span>高级筛选</span>
            </button>
            
            <div class="view-toggle">
                <button class="view-btn active" data-view="card" title="卡片视图">
                    <i class="fas fa-th-large"></i>
                </button>
                <button class="view-btn" data-view="list" title="列表视图">
                    <i class="fas fa-list"></i>
                </button>
                <button class="view-btn" data-view="grid" title="网格视图">
                    <i class="fas fa-th"></i>
                </button>
            </div>
        </div>
    </div>
    
    <!-- 合约列表 -->
    <div class="contract-list" id="contractList">
        <!-- 多图合约示例 -->
        <div class="contract-card">
            <div class="contract-images">
                <div class="contract-image">
                    <img src="https://picsum.photos/id/64/400/300" alt="活动图片1">
                </div>
                <div class="contract-image">
                    <img src="https://picsum.photos/id/65/400/300" alt="活动图片2">
                </div>
                <div class="contract-image">
                    <img src="https://picsum.photos/id/66/400/300" alt="活动图片3">
                </div>
                <div class="image-count">3图</div>
            </div>
            
            <div class="contract-content">
                <div class="contract-header">
                    <h3 class="contract-title">周末户外露营交友</h3>
                    <span class="contract-status status-active">可报名</span>
                </div>
                
                <div class="user-info">
                    <img src="https://picsum.photos/id/91/100/100" alt="用户头像" class="user-avatar">
                    <div class="user-details">
                        <div class="user-name">自然爱好者</div>
                        <div class="user-meta">发起过12次活动</div>
                    </div>
                </div>
                
                <div class="contract-meta">
                    <div class="meta-item">
                        <i class="far fa-calendar-alt"></i>
                        <span>周六 09:00</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>2.5km</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-users"></i>
                        <span>6/12人</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-wallet"></i>
                        <span>¥198/人</span>
                    </div>
                </div>
                
                <p class="contract-desc">
                    周末一起去郊外露营，欣赏星空，烧烤聊天，认识新朋友。提供帐篷和烧烤设备，欢迎喜欢自然的朋友加入。
                </p>
                
                <div class="contract-tags">
                    <span class="contract-tag">露营</span>
                    <span class="contract-tag">户外</span>
                    <span class="contract-tag">新朋友</span>
                </div>
                
                <div class="contract-actions">
                    <button class="action-btn secondary-btn">了解详情</button>
                    <button class="action-btn primary-btn">申请加入</button>
                </div>
            </div>
        </div>
        
        <!-- 单图合约示例 -->
        <div class="contract-card">
            <div class="contract-images">
                <div class="contract-image" style="flex: 100%">
                    <img src="https://picsum.photos/id/24/800/400" alt="活动图片">
                </div>
                <div class="image-count">1图</div>
            </div>
            
            <div class="contract-content">
                <div class="contract-header">
                    <h3 class="contract-title">读书会交友活动</h3>
                    <span class="contract-status status-active">可报名</span>
                </div>
                
                <div class="user-info">
                    <img src="https://picsum.photos/id/92/100/100" alt="用户头像" class="user-avatar">
                    <div class="user-details">
                        <div class="user-name">书海拾贝</div>
                        <div class="user-meta">发起过8次活动</div>
                    </div>
                </div>
                
                <div class="contract-meta">
                    <div class="meta-item">
                        <i class="far fa-calendar-alt"></i>
                        <span>周日 14:00</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>5.8km</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-users"></i>
                        <span>4/10人</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-wallet"></i>
                        <span>免费</span>
                    </div>
                </div>
                
                <p class="contract-desc">
                    本月共读《人类简史》，一起讨论书中观点，分享阅读心得，认识志同道合的朋友。现场提供茶水和小点心。
                </p>
                
                <div class="contract-tags">
                    <span class="contract-tag">读书</span>
                    <span class="contract-tag">文化</span>
                    <span class="contract-tag">免费</span>
                </div>
                
                <div class="contract-actions">
                    <button class="action-btn secondary-btn">了解详情</button>
                    <button class="action-btn primary-btn">申请加入</button>
                </div>
            </div>
        </div>
        
        <!-- 无图合约示例 -->
        <div class="contract-card">
            <div class="no-image">
                <i class="fas fa-music fa-3x"></i>
            </div>
            
            <div class="contract-content">
                <div class="contract-header">
                    <h3 class="contract-title">线上音乐分享会</h3>
                    <span class="contract-status status-pending">即将开始</span>
                </div>
                
                <div class="user-info">
                    <img src="https://picsum.photos/id/93/100/100" alt="用户头像" class="user-avatar">
                    <div class="user-details">
                        <div class="user-name">音乐发烧友</div>
                        <div class="user-meta">发起过23次活动</div>
                    </div>
                </div>
                
                <div class="contract-meta">
                    <div class="meta-item">
                        <i class="far fa-calendar-alt"></i>
                        <span>周五 20:00</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-video"></i>
                        <span>线上活动</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-users"></i>
                        <span>15/50人</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-wallet"></i>
                        <span>¥30/人</span>
                    </div>
                </div>
                
                <p class="contract-desc">
                    线上音乐分享会，每人分享一首最近喜欢的歌曲并讲述背后的故事，适合喜欢音乐的朋友参与。
                </p>
                
                <div class="contract-tags">
                    <span class="contract-tag">音乐</span>
                    <span class="contract-tag">线上</span>
                    <span class="contract-tag">兴趣</span>
                </div>
                
                <div class="contract-actions">
                    <button class="action-btn secondary-btn">了解详情</button>
                    <button class="action-btn primary-btn">申请加入</button>
                </div>
            </div>
        </div>
        
        <!-- 多图合约示例 -->
        <div class="contract-card">
            <div class="contract-images">
                <div class="contract-image">
                    <img src="https://picsum.photos/id/42/400/300" alt="活动图片1">
                </div>
                <div class="contract-image">
                    <img src="https://picsum.photos/id/43/400/300" alt="活动图片2">
                </div>
                <div class="image-count">2图</div>
            </div>
            
            <div class="contract-content">
                <div class="contract-header">
                    <h3 class="contract-title">手工陶艺体验课</h3>
                    <span class="contract-status status-active">可报名</span>
                </div>
                
                <div class="user-info">
                    <img src="https://picsum.photos/id/94/100/100" alt="用户头像" class="user-avatar">
                    <div class="user-details">
                        <div class="user-name">匠心手作</div>
                        <div class="user-meta">发起过5次活动</div>
                    </div>
                </div>
                
                <div class="contract-meta">
                    <div class="meta-item">
                        <i class="far fa-calendar-alt"></i>
                        <span>周六 15:00</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>8.2km</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-users"></i>
                        <span>3/8人</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-wallet"></i>
                        <span>¥168/人</span>
                    </div>
                </div>
                
                <p class="contract-desc">
                    专业陶艺老师指导，体验拉坯和手捏陶艺，作品可带走。适合喜欢手工艺术的朋友，轻松愉快的氛围认识新朋友。
                </p>
                
                <div class="contract-tags">
                    <span class="contract-tag">手工</span>
                    <span class="contract-tag">艺术</span>
                    <span class="contract-tag">体验</span>
                </div>
                
                <div class="contract-actions">
                    <button class="action-btn secondary-btn">了解详情</button>
                    <button class="action-btn primary-btn">申请加入</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-handshake"></i>
            <span>合约</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-plus-circle"></i>
            <span>发布</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-comment"></i>
            <span>消息</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-user"></i>
            <span>我的</span>
        </a>
    </div>
    
    <!-- 高级筛选弹窗 -->
    <div class="filter-modal" id="filterModal">
        <div class="filter-content">
            <div class="filter-title">
                <span>高级筛选</span>
                <button class="nav-btn" id="closeFilterBtn">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <div class="filter-section">
                <div class="section-title">活动类型</div>
                <div class="filter-options">
                    <button class="filter-option">全部类型</button>
                    <button class="filter-option selected">户外活动</button>
                    <button class="filter-option">文化艺术</button>
                    <button class="filter-option">美食聚餐</button>
                    <button class="filter-option">线上活动</button>
                    <button class="filter-option">运动健身</button>
                    <button class="filter-option">学习交流</button>
                </div>
            </div>
            
            <div class="filter-section">
                <div class="section-title">参与人数</div>
                <div class="filter-options">
                    <button class="filter-option selected">不限</button>
                    <button class="filter-option">2-5人</button>
                    <button class="filter-option">6-10人</button>
                    <button class="filter-option">11-20人</button>
                    <button class="filter-option">20人以上</button>
                </div>
            </div>
            
            <div class="filter-section">
                <div class="section-title">活动费用</div>
                <div class="filter-options">
                    <button class="filter-option selected">不限</button>
                    <button class="filter-option">免费</button>
                    <button class="filter-option">50元以下</button>
                    <button class="filter-option">50-200元</button>
                    <button class="filter-option">200元以上</button>
                </div>
            </div>
            
            <div class="filter-section">
                <div class="section-title">距离范围</div>
                <input type="range" min="1" max="50" value="10" class="range-slider" id="distanceSlider">
                <div class="range-value" id="distanceValue">10公里以内</div>
            </div>
            
            <div class="filter-section">
                <div class="section-title">活动时间</div>
                <div class="filter-options">
                    <button class="filter-option selected">全部时间</button>
                    <button class="filter-option">今天</button>
                    <button class="filter-option">明天</button>
                    <button class="filter-option">周末</button>
                    <button class="filter-option">下周</button>
                </div>
            </div>
            
            <div class="filter-buttons">
                <button class="filter-reset" id="resetFilterBtn">重置</button>
                <button class="filter-confirm" id="applyFilterBtn">应用筛选</button>
            </div>
        </div>
    </div>
    
    <!-- 提示消息 -->
    <div class="toast" id="toastMessage"></div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // DOM元素
        const backBtn = document.getElementById('backBtn');
        const searchBtn = document.getElementById('searchBtn');
        const advanceFilterBtn = document.getElementById('advanceFilterBtn');
        const closeFilterBtn = document.getElementById('closeFilterBtn');
        const filterModal = document.getElementById('filterModal');
        const applyFilterBtn = document.getElementById('applyFilterBtn');
        const resetFilterBtn = document.getElementById('resetFilterBtn');
        const distanceSlider = document.getElementById('distanceSlider');
        const distanceValue = document.getElementById('distanceValue');
        const filterTabs = document.querySelectorAll('.filter-tab');
        const filterOptions = document.querySelectorAll('.filter-option');
        const viewBtns = document.querySelectorAll('.view-btn');
        const contractList = document.getElementById('contractList');
        const toastMessage = document.getElementById('toastMessage');
        
        // 初始化
        function init() {
            setupEventListeners();
        }
        
        // 设置事件监听
        function setupEventListeners() {
            // 返回按钮
            backBtn.addEventListener('click', () => {
                history.back();
                showToast('返回上一页');
            });
            
            // 搜索按钮
            searchBtn.addEventListener('click', () => {
                showToast('搜索功能');
            });
            
            // 筛选弹窗控制
            advanceFilterBtn.addEventListener('click', () => {
                filterModal.classList.add('show');
            });
            
            closeFilterBtn.addEventListener('click', () => {
                filterModal.classList.remove('show');
            });
            
            // 点击弹窗外部关闭
            filterModal.addEventListener('click', (e) => {
                if (e.target === filterModal) {
                    filterModal.classList.remove('show');
                }
            });
            
            // 距离滑块
            distanceSlider.addEventListener('input', () => {
                const value = distanceSlider.value;
                distanceValue.textContent = `${value}公里以内`;
            });
            
            // 筛选标签切换
            filterTabs.forEach(tab => {
                tab.addEventListener('click', () => {
                    filterTabs.forEach(t => t.classList.remove('active'));
                    tab.classList.add('active');
                    showToast(`已切换到${tab.textContent}`);
                });
            });
            
            // 筛选选项切换
            filterOptions.forEach(option => {
                option.addEventListener('click', () => {
                    // 如果是"全部类型"或"不限"选项，取消同组其他选中状态
                    if (option.textContent.includes('全部') || option.textContent.includes('不限')) {
                        const parent = option.parentElement;
                        parent.querySelectorAll('.filter-option').forEach(opt => {
                            opt.classList.remove('selected');
                        });
                    } else {
                        // 取消同组的"全部"或"不限"选项选中状态
                        const parent = option.parentElement;
                        parent.querySelectorAll('.filter-option').forEach(opt => {
                            if (opt.textContent.includes('全部') || opt.textContent.includes('不限')) {
                                opt.classList.remove('selected');
                            }
                        });
                    }
                    
                    option.classList.toggle('selected');
                });
            });
            
            // 应用筛选
            applyFilterBtn.addEventListener('click', () => {
                filterModal.classList.remove('show');
                showToast('筛选已应用');
            });
            
            // 重置筛选
            resetFilterBtn.addEventListener('click', () => {
                filterOptions.forEach(option => {
                    option.classList.remove('selected');
                });
                
                // 默认选中"全部类型"和"不限"
                document.querySelectorAll('.filter-option').forEach(option => {
                    if (option.textContent === '全部类型' || option.textContent === '不限') {
                        option.classList.add('selected');
                    }
                });
                
                distanceSlider.value = 10;
                distanceValue.textContent = '10公里以内';
            });
            
            // 视图切换
            viewBtns.forEach(btn => {
                btn.addEventListener('click', () => {
                    const viewType = btn.getAttribute('data-view');
                    
                    viewBtns.forEach(b => b.classList.remove('active'));
                    btn.classList.add('active');
                    
                    // 移除所有视图类
                    contractList.classList.remove('list-view', 'grid-view');
                    
                    // 添加当前视图类
                    if (viewType === 'list') {
                        contractList.classList.add('list-view');
                    } else if (viewType === 'grid') {
                        contractList.classList.add('grid-view');
                    }
                    
                    showToast(`${btn.title}`);
                });
            });
            
            // 申请加入按钮
            document.querySelectorAll('.primary-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const title = this.closest('.contract-card').querySelector('.contract-title').textContent;
                    showToast(`已申请加入 ${title}`);
                    this.textContent = '申请已发送';
                    this.disabled = true;
                    this.style.opacity = '0.8';
                });
            });
            
            // 了解详情按钮
            document.querySelectorAll('.secondary-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const title = this.closest('.contract-card').querySelector('.contract-title').textContent;
                    showToast(`查看 ${title} 详情`);
                    // 实际应用中这里会跳转到详情页
                });
            });
        }
        
        // 显示提示消息
        function showToast(message) {
            toastMessage.textContent = message;
            toastMessage.classList.add('show');
            setTimeout(() => {
                toastMessage.classList.remove('show');
            }, 2000);
        }
        
        // 初始化页面
        document.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>
